<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
              theme="dark"
              mode="horizontal"
              :default-selected-keys="['1']"
              :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1" @click="skipTo('Drag')">
          拖拽
        </a-menu-item>
        <a-menu-item key="2" @click="skipTo('LayoutGrid')">
          拖放布局页
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 24px;margin-top: 16px;height: calc(100vh - 80px)">
      <div :style="{ background: '#fff', padding: '24px', minHeight: 'calc(100% - 16px)' }">
        <router-view />
      </div>
    </a-layout-content>
  </a-layout>
</template>
<script>
  export default {
  	name: 'Home',
    methods: {
  		skipTo(name){
  			this.$router.push({
          name
        })
      }
    }
  }
</script>
<style>
  #components-layout-demo-top .logo {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0);
    margin: 16px 24px 16px 0;
    float: left;
  }
  #components-layout-demo-top .ant-menu {
    text-align: center;
    float: left;
  }
</style>
